<template>
  <div id="setup3"> 
   
   <div class="con">
         <div class="top_box">
            <img src="@/assets/images/newactive_bg3.png" />
         </div>
         <div class="con_text1">好友分享礼</div>
         <div class="con_text2" style="display:flex;align-items: center;">
           <div style="width:90px;">活动时间：</div>
           <div style="color:#888888;flex:1;">{{ datalist.starttime }}至{{ datalist.endtime }}<i class="el-icon-setting" @click="mtk1_but()" style="color:#888888;margin-left:15px;"></i></div>
         </div>
         <div class="con_text3" style="display:flex;align-items: center;">
              <div style="width:90px;">活动显示：</div>
              <el-switch  
                      :active-value="active" 
                      :inactive-value="isactive" 
                       v-model="datalist.hide1" 
                      @change="switchchange()"  
                      active-color="#F5CF49" 
                      inactive-color="#E5E5E5"
                      > 
              </el-switch>
         </div>
   </div>


      <!-- 修改时间 -->
    <el-dialog title="修改时间" :visible.sync="mtk1"  width="400px">
        <div style="width:100%;"> 

        <el-form ref="form"   label-width="70px" style="width:100%;">

              <el-form-item label="开放时间" >
                    <el-date-picker type="date" style="width:100%;"  placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"  v-model="start" ></el-date-picker>
              </el-form-item>  
              <el-form-item label="结束时间" >
                    <el-date-picker type="date"  style="width:100%;"  placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"  v-model="end" ></el-date-picker>
              </el-form-item>   
                                  
            </el-form>

            <div style="text-align: center;width:50%;margin:auto;">
                <el-button type="primary" class="custom_color_button" style="width:80%;" @click="mtk1_qr_but()">确认</el-button>
            </div>

        </div> 
    </el-dialog>

</div>
</template>

<script>

export default {
   name: 'setup3',
  data () {
    return {
        active:1,  //冻结登录
        isactive:2,  //冻结登录
        datalist:[],
        type:2,
        mtk1:false,
        start:'',
        end:''
    }
  },
   components:{

  },
  created(){
       this.list_fun()
  },
  mounted (){
    
  },
  methods: {
    list_fun(){
          this.post("/activity/info", {
              type:this.type
	        }).then(res => {
            this.datalist = res.result
            this.datalist.hide1 = parseInt(this.datalist.hide) 
            console.log(res,"333")
         })
    },
    switchchange(row){
        this.$confirm('是否显示/关闭, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
         }).then(() => {
                this.post("/activity/setShowOrHide", {
                    type:this.type,
                }).then(res => {

                    if(res.error_code == 0){
                    this.open1(res.result,'success')  //提示框
                     this.list_fun()
                    }else {
                    this.open1(res.message,'warning')
                }

             })
        }).catch(() => {
               this.list_fun()
        });
    },
    mtk1_but(){
       this.mtk1 = true
    },
    mtk1_qr_but(){
       this.post("/activity/setActivityTime", {
                    type:this.type,
                    start:this.start,
                    end:this.end,
                }).then(res => {

                    if(res.error_code == 0){
                     this.mtk1 = false
                     this.open1(res.result,'success')  //提示框
                     this.list_fun()
                    }else {
                    this.open1(res.message,'warning')
                }

         })
    }

  }
}
</script>


<style scoped>
.con{
   padding:15px 20px;
   box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.04);
   height: 300px;
   border-radius:10px;
}
/* .top_box{

} */
.top_box>img{
   width:52px;
   height: 52px;
   border-radius:50%;
}
.con_text1{
  font-size: 24px;
  font-weight: bold;
  color: #344563;
  margin-top:20px;
}
.con_text2{
  font-size: 17px;
  font-weight: 500;
  margin-top:20px;
  color: #5E6C84;
}
.con_text3{
  font-size: 17px;
  font-weight: 500;
  margin-top:20px;
  color: #5E6C84;
}
</style>